<div class="mainContainer">
  <div class="module Setting">
    <div class="cardTitle">签订单据</div>
    <hr class="cardTitileDivider" />
    <div nz-row class="inputwhole">
      <div nz-col [nzSpan]="6">
        <p class="inputlable">签订对象: </p>
      </div>
      <div nz-col [nzSpan]="18">
        <nz-select [(ngModel)]="selectedObject" style="width: 60%;">
          <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value">
          </nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row class="inputwhole">
      <div nz-col [nzSpan]="6">
        <p class="inputlable">金额: </p>
      </div>
      <div nz-col [nzSpan]="18">
        <nz-input-number [(ngModel)]="operator_count" [nzMin]="0" [nzStep]="100" style="width: 60%;">
        </nz-input-number>
      </div>
    </div>
    <div class="buttonArea">
      <button class="module postButton" nz-button nzType="default" (click)="showModal()">签订</button>
    </div>
  </div>
  <div class="module Noting">
    <div class="cardTitle">注意事项</div>
    <hr class="cardTitileDivider" />
    <div class="NotingDetail">
      <p>1. 单据签订后，您将欠签订对象一笔钱。</p>
      <p>2. 任何人包括签订对象，都可以查到您欠下的这笔钱。</p>
      <p>3. 您可以在债权信息页面查看这笔钱的状态，并执行相关操作。</p>
      <p>4. 请您坚守诚信，尽早还款。</p>
    </div>
    
  </div>
  <nz-modal [(nzVisible)]="isVisible" nzTitle="" [nzClosable]="false" (nzOnCancel)="handleSettingCancel()"
    (nzOnOk)="handleSettingOk()" [nzContent]="settingContent" [nzOkText]="'确定'" [nzStyle]="{ width: '500px' }">
    <ng-template #settingContent>
      <nz-table nzSize="small" [nzData]="[{}]" [nzHideOnSinglePage]="true" [nzTotal]=1 [nzNoResult]	>
      <thead>
        <tr>
          <th>签订对象</th>
          <th>金额</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ this.selectedObject }}</td>
          <td>{{ this.operator_count }}</td>
        </tr>
      </tbody>
    </nz-table>
    </ng-template>
  </nz-modal>
</div>